<template>
  <div class="version-container">
    <h2>更新情报</h2>
    <div class="main-box">

      <div class="platform-buttons">
        <button v-for="platform in platforms" :key="platform" :class="{ active: activePlatform === platform }"
          @click="switchPlatform(platform)">
          {{ platform }}
        </button>
      </div>
      <div class="version-content">
        <div class="timeline">
          <div v-for="(update, index) in filteredUpdates" :key="index" class="timeline-item"
            :class="{ active: activeIndex === index }" @click="selectUpdate(index)">
            <div class="timeline-date">{{ update.date }}</div>
            <div class="timeline-version">{{ update.version }}</div>
            <div class="timeline-dot"></div>
          </div>
        </div>

        <div class="update-details">
          <div v-if="filteredUpdates.length > 0">
            <h3>{{ filteredUpdates[activeIndex].version }}</h3>
            <div class="update-date">{{ filteredUpdates[activeIndex].date }}</div>
            <ul class="update-notes">
              <li v-for="(note, noteIndex) in filteredUpdates[activeIndex].notes" :key="noteIndex">
                {{ note }}
              </li>
            </ul>
          </div>
          <div v-else class="no-updates">
            该平台暂无更新记录
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const platforms = [
  '安卓版',
  'iPhone版',
  'PC客户端',
  'TV版',
  'iPad HD版',
  '车机版'
]

const updates = [
  {
    platform: '安卓版',
    date: '2025-06-25',
    version: 'Android 8.51.0',
    notes: [
      '修复了一些bug，然后吃了桂味、糯米糍、妃子笑、荔枝王......'
    ]
  },
  {
    platform: '安卓版',
    date: '2025-06-18',
    version: 'Android 8.50.0',
    notes: [
      '修复了一些bug，然后吃了桂味、糯米糍、妃子笑、荔枝王......'
    ]
  },
  {
    platform: '安卓版',
    date: '2025-06-11',
    version: 'Android 8.49.0',
    notes: [
      '收藏夹可以看到失效视频的封面和标题了，每份喜欢都值得留下印记！'
    ]
  },
  {
    platform: '安卓版',
    date: '2025-06-05',
    version: 'Android 8.48.0',
    notes: [
      '上B站搜索高考，名师、学霸天因为全国高考生祈福~',
      '修bug暂停！所有人举起双手，把元气借给高考生！',
      '修复了一些bug......'
    ]
  },
  {
    platform: '安卓版',
    date: '2025-05-28',
    version: 'Android 8.47.0',
    notes: []
  },
  {
    platform: 'iPhone版',
    date: '2025-06-20',
    version: 'iOS 7.25.0',
    notes: [
      '新增了暗黑模式',
      '优化了视频加载速度'
    ]
  }
]

const activePlatform = ref('安卓版')
const activeIndex = ref(0)

const filteredUpdates = computed(() => {
  return updates
    .filter(update => update.platform === activePlatform.value)
    .sort((a, b) => new Date(b.date) - new Date(a.date))
})

function switchPlatform(platform) {
  activePlatform.value = platform
  activeIndex.value = 0
}

function selectUpdate(index) {
  activeIndex.value = index
}
</script>

<style scoped lang="scss">
.version-container {
  padding: 20px;
  min-width: 1160px;
  background-color: #fff2f2;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

h2 {
  width: 100px;
  border-bottom: 1px #f25d8e solid;
  padding-bottom: 10px;
  margin: auto;
}

.main-box {
  width: 1160px;;
  min-height: 500px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0 auto;
  box-shadow: 0 0 5px 3px #ffd7d7;
  .platform-buttons {
    display: flex;
    gap: 10px;
    margin-top: 8px;

    button {
      padding: 8px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      background: #fff;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;
      margin: 0 auto;

      &.active {
        border-radius: 30px;
        background-color: #f25d8e;
        color: #fff;
      }
    }
  }

  .version-content {
    display: flex;
    gap: 30px;
  }

  .timeline {
    flex: 1;
    max-width: 200px;
    border-right: 1px solid #eee;
    padding-right: 20px;
    border-bottom: 1px solid #e5e9ef;
    margin-bottom: 36px;
    // background-color: #df1e1e;
  }

  .timeline-item {
    padding: 15px 0;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 20px;
    color: #6d757a;
    margin-top: 5px;

    &:not(:last-child) {
      border-bottom: 1px dashed #eee;
    }

    &:hover {

      .timeline-date,
      .timeline-version {
        color: #00a1d6;
      }
    }

    &.active {
      .timeline-date {
        font-weight: bold;
        color: #333;
      }

      .timeline-version {
        color: #00a1d6;
      }

      .timeline-dot {
        background: #00a1d6;
        border-color: #00a1d6;
      }
    }
  }

  .timeline-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    transition: color 0.3s;
  }

  .timeline-version {
    font-size: 13px;
    color: #999;
    transition: color 0.3s;
  }

  .timeline-dot {
    position: absolute;
    right: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: white;
    transition: all 0.3s;
  }

  .update-details {
    flex: 3;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;

    h3 {
      margin-top: 0;
      color: #333;
      font-size: 18px;
    }
  }

  .update-date {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .update-notes {
    padding-left: 20px;
    margin: 0;

    li {
      margin-bottom: 10px;
      color: #666;
      line-height: 1.6;
    }
  }

  .no-updates {
    color: #999;
    text-align: center;
    padding: 40px 0;
  }
}
</style>
